<script setup>
import { ref } from 'vue'
import { fetchCompanyDetails } from '../api/company.js'

defineProps({
  msg: String,
})

const companyDetail = ref(null)
const loading = ref(false)
const error = ref(null)

// 点击卡片获取详情
const handleCardClick = async (companyId) => {
  loading.value = true
  error.value = null

  try {
    const detail = await fetchCompanyDetails(companyId)
    companyDetail.value = detail
    console.log('公司详情:', detail)
  } catch (err) {
    error.value = err.message
    console.error('获取详情失败:', err)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card" @click="handleCardClick(1)" style="cursor: pointer;">
    <h3>点击卡片获取公司详情</h3>
    <p v-if="loading">加载中...</p>
    <p v-if="error" style="color: red;">{{ error }}</p>
    <div v-if="companyDetail" class="company-detail">
      <h4>{{ companyDetail.name }}</h4>
      <p><strong>行业：</strong>{{ companyDetail.industry }}</p>
      <p><strong>简介：</strong>{{ companyDetail.description }}</p>
      <p><strong>地址：</strong>{{ companyDetail.address }}</p>
      <p><strong>员工规模：</strong>{{ companyDetail.employees }}</p>
    </div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
